<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" :title="mainTitleName()" :width="700" destroy-on-close
             @closed="$emit('closed')">
    <el-form ref="dialogForm" :disabled="mode=='show'" :model="form" :rules="rules" label-position="right"
             label-width="100px">
      <el-row>
        <el-col :span="24">
          <div class="flex " style="flex-wrap: wrap;justify-content: space-between">
            <el-form-item label="模型单元" prop="unit">
              <el-select style="width: 200px" v-model="form.unit" placeholder="请选择模型单元">
                <el-option
                    v-for="item in modelUnit"
                    :key="item.id"
                    :label="item.unit"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模型类型" prop="typeId">
              <el-select style="width: 200px"  v-model="form.typeId" placeholder="请选择模型类型">
                <el-option
                    v-for="item in modelType"
                    :key="item.id"
                    :label="item.tname"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模型星级" prop="star">
              <el-select style="width: 200px"  v-model="form.star" placeholder="请选择模型星级">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模型模式" prop="mode">
              <el-select style="width: 200px"  v-model="form.mode" placeholder="请选择模型模式">
                <el-option
                    v-for="item in modelPattern"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
         <div style="display: flex;justify-content: space-between;">
           <el-form-item label="模型标题" prop="title">
             <el-input v-model="form.title" :maxlength="200" clearable placeholder="请输入模型标题"
                       show-word-limit></el-input>
           </el-form-item>
           <el-form-item label="模型话题" prop="talk">
             <el-input v-model="form.talk" :maxlength="200" clearable placeholder="请输入模型话题"
                       show-word-limit></el-input>
           </el-form-item>
         </div>
          <el-form-item label="模型内容" prop="conentEn">
            <el-input
                type="textarea"
                :rows="20"
                placeholder="请输入内容"
                v-model="form.conentEn">
            </el-input>
<!--            <el-input-->
<!--                type="textarea"-->
<!--                v-model="form.conentEn"-->
<!--            ></el-input>-->
          </el-form-item>
          <el-form-item label="模型翻译" prop="conentCn">
            <scEditor
                v-model="form.conentCn"
            ></scEditor>
          </el-form-item>
          <el-form-item label="模型要求" prop="require">
            <scEditor
                v-model="form.require"
            ></scEditor>
          </el-form-item>
          <el-form-item label="模型解析" prop="analysis">
            <scEditor
                v-model="form.analysis"
            ></scEditor>
          </el-form-item>
          <el-form-item
              v-for="(item, index) in form.sentence"
              :label="'第' + (index+1) + '句'"
              :key="index+1"
          >
            <div class="flexBox">
              <el-form-item
                  :label="'第' + (index + 1) + '句内容'"
                  :prop="'sentence.' + index + '.title'"
                  :rules="[{ required: true, message: '每句内容不能为空', trigger: 'blur' }]"
              >
                <el-input v-model="item.title" placeholder="请输入句子内容"></el-input>
              </el-form-item>
              <el-form-item
                  :label="'第' + (index + 1) + '句翻译'"
                  :prop="'sentence.' + index + '.translation'"
                  :rules="[{ required: true, message: '每句翻译不能为空', trigger: 'blur' }]"
              >
                <el-input v-model="item.translation" placeholder="请输入翻译"></el-input>
              </el-form-item>
              <div  style="width: 80px">
                <el-button @click.prevent="removeDomain(item)">删除</el-button>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="addDomain">新增每句</el-button>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!='show'" :loading="isSaveing" type="primary" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import scAudioButton from '@/components/scUpload/audio_button.vue'
import {defineAsyncComponent} from "vue";
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
export default {
  emits: ['success', 'closed'],
  components: {
    scAudioButton,
    scEditor
  },
  props: {
    mainName: {
      type: String,
      default: () => {
        return '语法库'
      }
    },
  },
  data() {
    return {
      mode: "add",
      course: null,
      visible: false,
      isSaveing: false,
      form: this.getDefaultRuleForm(),
      options: [{
        value: 1,
        label: '一星'
      }, {
        value: 2,
        label: '二星'
      }, {
        value: 3,
        label: '三星'
      }, {
        value: 4,
        label: '四星'
      }, {
        value: 5,
        label: '五星'
      }],
      modelUnit: [],
      modelType: [],
      modelPattern: [],
      rules: {
        unit: [
          {required: true, message: '请选择模型单元'},
        ],
        typeId: [
          {required: true, message: '请选择模型类型'},
        ],
        star: [
          {required: true, message: '请选择模型星级'},
        ],
        mode: [
          {required: true, message: '请选择模型模式'},
        ],

        conentEn: [
          {required: true, message: '请输入模型内容'},
        ],
        conentCn: [
          {required: true, message: '请输入模型翻译'},
        ],
        require: [
          {required: true, message: '请输入模型要求'},
        ],
        analysis: [
          {required: true, message: '请输入模型解析'},
        ],
        sort: [
          {required: true, message: '请输入排序编号'},
        ],
        title: [
          {required: true, message: '请输入标题'},
        ],
        talk: [
          {required: true, message: '请输入话题'},
        ],
      },
      play: {
        src: '',
        type: 1,
        status: false
      },
      voiceFiles: [],
      translationVoiceFiles: [],
    }
  },
  mounted() {
  },
  async created() {
   await this.$API.course.courseW.Unitlist.get().then((res)=>{
     this.modelUnit = res.data
   })
    await this.$API.course.courseW.Typelist.get().then((res)=>{
      this.modelType = res.data
    })
    await this.$API.course.courseW.Modelist.get().then((res)=>{
      this.modelPattern = res.data
    })
  },
  methods: {
    removeDomain(item) {
      var index = this.form.sentence.indexOf(item)
      if (index !== -1) {
        this.form.sentence.splice(index, 1)
        this.$notify.success("删除成功")
      }
    },
    addDomain(){
      this.form.sentence.push({ title: '', translation: '' });
    },
    //显示
    open(mode = 'add', course) {
      this.mode = mode;
      this.visible = true;
      this.course = course
      this.form.courseId = course.id
      return this
    },
    //表单提交方法
    async submit() {
      if (!await this.$refs.dialogForm.validate().catch(() => {
        this.$notify.error("请检测表单是否有未填写的项")
        return false
      })) {
        return false
      }
      let _data = this.form
      console.log(_data)
      try {
        this.isSaveing = true;
        if (this.form.id) {
          await this.$API.course.courseW.action.PUT(_data)
        } else {
          await this.$API.course.courseW.action.POST(_data)
        }

        this.$emit('success')
        this.visible = false;
        this.$notify.success("保存成功")
      } finally {
        this.isSaveing = false;
      }
    },
    //表单注入数据
    async setData(is) {
      let ids = {
        id:is.id
      }
      await this.$API.course.courseW.writingInfo.get(ids).then((item)=>{
        const _form = {
          id: item.data.id,
          courseId: item.data.courseId?item.data.courseId:'',//课程id,
          unit:item.data.unit?item.data.unit:'',//单元id
          typeId:item.data.typeId?item.data.typeId:'',//类型id
          star:item.data.star?item.data.star:'',//	星级
          talk:item.data.talk?item.data.talk:'',//	话题
          mode:item.data.mode?item.data.mode:'',//模型id
          title:item.data.title?item.data.title:'',//标题
          conentEn:item.data.conentEn?item.data.conentEn:'',//内容英文
          conentCn:item.data.conentCn?item.data.conentCn:'',//内容中文
          require:item.data.require?item.data.require:'',//模型要求
          analysis:item.data.analysis?item.data.analysis:'',//模型解析
          sentence:item.data.sentence?item.data.sentence:[],//写作模型句子列表
        };
        this.form = _form
      })
      console.log(123)
    },
    getDefaultRuleForm() {
      return {
        id: null,
        courseId: '',//课程id,
        unit:'',//单元id
        typeId:'',//类型id
        star:'',//	星级
        talk:'',//	话题
        mode:'',//模型id
        title:'',//标题
        conentEn:'',//内容英文
        conentCn:'',//内容中文
        require:'',//模型要求
        analysis:'',//模型解析
        sentence: [//写作模型句子列表
          { title: '', translation: '' },
        ]
      }
    },
    mainTitleName() {
      let titleName = '';
      if (!this.form.id && this.course) {
        titleName = `添加【${this.course.name}】${this.mainName}`;
      } else if (!this.form.id) {
        titleName = `新增${this.mainName}`;
      } else {
        titleName = `编辑${this.mainName}`;
      }
      return titleName;
    },
  }
}
</script>

<style scoped>
.flexBox{
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #ccc;
  div{
    padding-bottom: 10px;
  }
}
.ck-editor__editable {
  height: 200px !important;
}
</style>
